<template>
  <div class="send_r">
    <w-breadcrumb style="font-size: 14px; margin-left: 5px" separator="/">
      <w-breadcrumb-item>我的发货订单</w-breadcrumb-item>
      <w-breadcrumb-item>发货订单列表</w-breadcrumb-item>
    </w-breadcrumb>
    <div class="sendOrder_table">
      <w-tabs
        type="card"
        v-model="activeName"
        @tab-click="handleChangeTag"
        class="send_list"
      >
        <w-tab-pane label="进行中" name="first">
          <w-table
            :default-sort="{ prop: 'orderTime', order: 'descending' }"
            :data="
              inTableData.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )
            "
            class="send_item"
          >
            <w-table-column
              width="120"
              prop="id"
              label="订单号"
              label-class-name="sendItem_t"
            ></w-table-column>
            <w-table-column
              prop="type"
              label="货物名称"
              width="120"
            ></w-table-column>
            <w-table-column
              prop="orderTime"
              label="下单时间"
              width="170"
              sortable
            ></w-table-column>
            <w-table-column
              prop="receiveName"
              label="收货人姓名"
              width="130"
            ></w-table-column>
            <w-table-column
              prop="receivePhone"
              label="收货人手机号"
              width="160"
            ></w-table-column>
            <w-table-column
              prop="value"
              label="运费"
              width="120"
            ></w-table-column>
            <w-table-column label="操作" class="sendItem_t">
              <template slot-scope="scope">
                <w-button
                  @click="checkDetail(scope.row.id)"
                  type="text"
                  size="small"
                  >查看具体信息</w-button
                >
                <w-button @click="open(scope.row.id)" type="text" size="small">
                  取消订单
                </w-button>
              </template>
            </w-table-column>
          </w-table>
          <w-pagination
            class="send_bottom"
            @current-change="current_change"
            :current-page="currentPage"
            small
            background
            :page-size="pageSize"
            layout="prev, pager, next"
            :total="inTableData.length"
          >
          </w-pagination>
        </w-tab-pane>
        <w-tab-pane label="已签收">
          <w-table
            :default-sort="{ prop: 'finishTime', order: 'descending' }"
            :data="
              finishTableData.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )
            "
            class="send_item"
          >
            <w-table-column
              prop="id"
              label="订单号"
              label-class-name="snedItem_t"
              width="120"
            ></w-table-column>
            <w-table-column
              prop="type"
              label="货物名称"
              width="120"
            ></w-table-column>
            <w-table-column
              prop="receiveName"
              label="收货人姓名"
              width="130"
            ></w-table-column>
            <w-table-column
              prop="receivePhone"
              label="收货人手机号"
              width="160"
            ></w-table-column>
            <w-table-column
              prop="value"
              label="运费"
              width="120"
            ></w-table-column>
            <w-table-column sortable prop="finishTime" label="完成时间" width="180">
            </w-table-column>
            <w-table-column label="操作">
              <template slot-scope="scope">
                <w-button
                  @click="checkDetail(scope.row.id)"
                  type="text"
                  size="small"
                  >查看具体信息</w-button
                >
              </template>
            </w-table-column>
          </w-table>
          <w-pagination
            class="send_bottom_y"
            @current-change="current_change"
            :current-page="currentPage"
            small
            background
            :page-size="pageSize"
            layout="prev, pager, next"
            :total="finishTableData.length"
          ></w-pagination>
        </w-tab-pane>
        <w-tab-pane label="已取消">
          <w-table
            :default-sort="{ prop: 'cancelTime', order: 'descending' }"
            :data="
              cancelTableData.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )
            "
            class="send_item"
          >
            <w-table-column
              prop="id"
              label="订单号"
              label-class-name="snedItem_t"
              width="120"
            ></w-table-column>
            <w-table-column
              prop="type"
              label="货物名称"
              width="120"
            ></w-table-column>
            <w-table-column
              width="130"
              prop="receiveName"
              label="收货人姓名"
            ></w-table-column>
            <w-table-column
              width="160"
              prop="receiveName"
              label="收货人手机号"
            ></w-table-column>
            <w-table-column
              prop="value"
              label="运费"
              width="120"
            ></w-table-column>
            <w-table-column sortable prop="cancelTime" label="取消时间" width="180">
            </w-table-column>
            <w-table-column label="操作">
              <template slot-scope="scope">
                <w-button
                  @click="checkDetail(scope.row.id)"
                  type="text"
                  size="small"
                  >查看具体信息</w-button
                >
              </template>
            </w-table-column>
          </w-table>
          <w-pagination
            class="send_bottom_y"
            @current-change="current_change"
            :current-page="currentPage"
            small
            background
            :page-size="pageSize"
            layout="prev, pager, next"
            :total="cancelTableData.length"
          ></w-pagination>
        </w-tab-pane>
      </w-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "Send",
  data() {
    return {
      activeName: "first",
      pageSize: 6,
      currentPage: 1,
      inTableData: [],
      finishTableData: [],
      cancelTableData: [],
      msg: "",
    };
  },
  methods: {
    current_change(currentPage) {
      this.currentPage = currentPage;
    },
    open(id) {
      let uid = localStorage.getItem('uid')
      this.$confirm("是否确认取消订单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            method: "GET",
            url: "http://1.15.170.222:88/api/order/user/cancelOrder/" + id,
          }).then((response) => {
            console.log(response);
            this.msg = response.data.msg;
            if (this.msg === "取消成功") {
              this.$message({
                message:'取消订单成功',
                type:'success'
              })
              var isLast = false;
              if (
                this.currentPage ===
                Math.ceil(this.inTableData.length / this.pageSize)
              ) {
                isLast = true;
              }
              for (var i = 0; i < this.inTableData.length; i++) {
                if (this.inTableData[i].id === id) {
                  this.inTableData.splice(i, 1);
                }
              }
              if (isLast && this.inTableData.length % this.pageSize === 0) {
                this.currentPage--;
              }
              this.$axios({
              method: "GET",
              url:
                "http://1.15.170.222:88/api/order/user/getMyCanceledSendOrdersByUid/" +
                uid,
            }).then((response) => {
              console.log(response);
              this.cancelTableData = response.data.data;
            });
            }else if(this.msg === "订单已在进行中，取消失败，请联系客服"){
              this.$alert("订单已在进行中，取消失败，请联系客服", "提示", {
                confirmButtonText: "确定",
              });
            }
          });
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    checkDetail(msg) {
      localStorage.setItem("route", this.$route.path);
      localStorage.setItem("pageNo", this.currentPage);
      this.$router.push({
        name: "fahuoxinxi",
        query: {
          id: msg,
        },
      });
    },
    handleChangeTag() {
      localStorage.removeItem("route");
      localStorage.removeItem("pageNo");
      this.currentPage = 1;
    },
  },
  created() {
    const uid = localStorage.getItem("uid");
    this.$axios({
      method: "GET",
      url:
        "http://1.15.170.222:88/api/order/user/getMyOnWaySendOrdersByUid/" +
        uid,
    }).then((response) => {
      console.log(response);
      this.inTableData = response.data.data;
    });
    this.$axios({
      method: "GET",
      url:
        "http://1.15.170.222:88/api/order/user/getMyOverSendOrdersByUid/" + uid,
    }).then((response) => {
      console.log(response);
      this.finishTableData = response.data.data;
    });
    this.$axios({
      method: "GET",
      url:
        "http://1.15.170.222:88/api/order/user/getMyCanceledSendOrdersByUid/" +
        uid,
    }).then((response) => {
      console.log(response);
      this.cancelTableData = response.data.data;
    });
    let pageNo = localStorage.getItem("pageNo");
    let route = localStorage.getItem("route");
    if (route === this.$route.path) {
      this.currentPage = Number(pageNo);
    }
    localStorage.removeItem("pageNo");
    localStorage.removeItem("route");
  },
};
</script>

<style>
.send_r {
  padding-top: 40px;
  padding-left: 82px;
  display: flex;
  flex-direction: column;
  width: 1050px;
  height: 680px;
}
.send_list {
  margin-top: 40px;
}
.send_item {
  font-size: 14px;
  margin-bottom: 40px;
}
.sendOrder_table {
  width: 980px;
  margin: 0 auto;
}
.send_bottom_y,
.send_bottom {
  display: flex;
  justify-content: center;
}
</style>
